import React, {Component} from 'react';
import './index.css';
import PropTypes from 'prop-types';

export default class Index extends Component {

  static propTypes = {
    todo: PropTypes.array.isRequired,
    handleClearAllDone: PropTypes.func.isRequired,
    handleCheckAll: PropTypes.func.isRequired,

  }

  handleClearAllDone = () => {
    this.props.handleClearAllDone()
  }

  handleCheckAll = (event) => {
    this.props.handleCheckAll(event.target.checked)
  }

  render() {

    const {todo} = this.props;
    const count = todo.length;
    const checkedCount = todo.reduce(
        (pre, item) => pre + (item.checked ? 1 : 0), 0);
    return (
        <div className="todo-footer">
          <label>
            <input type="checkbox" onChange={this.handleCheckAll}
                   checked={checkedCount > 0}/>
          </label>
          <span>
					<span>已完成{checkedCount}</span> / 全部{count}
				</span>
          <button onClick={this.handleClearAllDone}
                  style={{display: count > 0 ? 'block' : 'none'}}
                  className="btn btn-danger">清除已完成任务
          </button>
        </div>
    );
  }
}
